import { createRecommendStore } from '@/store'
import React, { memo, useEffect, useRef, useState } from 'react'
import type { ReactNode, ElementRef } from 'react'
import type { banner } from '@/views/discover/c-views/recommend/store/recommend'
import { BannerControl, BannerLeft, BannerRight, BannerWrapper } from './style'
import { ConfigProvider, Carousel } from 'antd'

interface Iprops {
    children?: ReactNode
}

const TopBanner: React.FC<Iprops> = () => {
    const { banners, bannersBackground, getBannerData } = createRecommendStore()
    const bannerRef = useRef<ElementRef<typeof Carousel>>(null)
    const [bgImgUrl, setBgImgUrl] = useState(bannersBackground[0]) // 使用 useState 来存储背景图 URL

    function toPre() {
        bannerRef.current?.prev()
    }

    function toNext() {
        bannerRef.current?.next()
    }

    function imgBeforeChange(_current: number, next: number) {
        setBgImgUrl(bannersBackground[next]) // 更新背景图 URL
    }

    useEffect(() => {
        getBannerData()

        // 手动触发一次 imgBeforeChange
        if (banners.length > 0) {
            imgBeforeChange(0, 1) // 使用 0 作为初始当前索引
        }
    }, [getBannerData]) // 监听 banners.length

    useEffect(() => {
        // 设置初始背景图
        if (bannersBackground.length > 0) {
            setBgImgUrl(bannersBackground[0]) // 组件加载时设置初始背景图
        }
    }, [bannersBackground])

    return (
        <BannerWrapper>
            <div className="banner">
                <BannerLeft>
                    <ConfigProvider
                        theme={{
                            components: {
                                Carousel: {
                                    dotActiveWidth: 6, // 激活态指示点宽度
                                    dotGap: 8, // 指示点之间的间距
                                    dotHeight: 6, // 指示点高度
                                    dotOffset: 12, // 指示点距离边缘的距离
                                    dotWidth: 6 // 指示点宽度
                                }
                            }
                        }}
                    >
                        <Carousel
                            autoplay
                            autoplaySpeed={5000}
                            effect="fade"
                            ref={bannerRef}
                            beforeChange={imgBeforeChange}
                        >
                            {banners.map((item: banner) => (
                                <div className="item" key={item.imageUrl}>
                                    <img src={item.imageUrl} alt={item.typeTitle} />
                                </div>
                            ))}
                        </Carousel>
                    </ConfigProvider>
                </BannerLeft>
                <BannerRight>
                    <img src="/images/download.png" alt="下载" />
                </BannerRight>
                <BannerControl>
                    <div className="btn-left" onClick={toPre}></div>
                    <div className="btn-right" onClick={toNext}></div>
                </BannerControl>
            </div>
            <div
                className="banner-bottom"
                style={{ background: `url('${bgImgUrl}') center center / 6000px` }}
            ></div>
        </BannerWrapper>
    )
}

export default memo(TopBanner)
